<template lang="pug">
.doctor-list-wrap
	.date-group
		.all-date(@click="dateTab(0)")
			.time-item(:class="{'active':dateIndex===0}")
				h6
					p 全部
		.time-wrap
			.time-block(v-for="(item,index) in dateArray" :key="index" @click="dateTab(index+1)")
				.time-item(:class="{'active':dateIndex===index+1}")
					h6
						p {{item.week}}
						small {{item.day}}
	.filter-wrap
		top-filter(:options="filterOptions" @getOptions="getOptions")
	scroll-view.doctor-list(scroll-y @scrolltolower="scrollToLower")
		no-item(text="暂无相关医院" v-if="noItem")
		doctor-item(:item="item" v-for="(item,index) in list" :key="index" @listenClick="goDetail(item)")

</template>

<script>
import topFilter from '@/components/top-filter'
import doctorItem from '@/components/bespeak/doctor-item'
import noItem from '@/components/no-item'
export default {
	name: 'doctorList',
	data() {
		return {
			dateIndex: 0,
			dateArray: [],
			filterOptions: [
				{
					actConIndex: 0,
					title: '挂号类别',
					content: [
						{ title: '全部' },
						{ title: '普通', value: '1' },
						{ title: '专家', value: '3' },
						{ title: '特需', value: '5' }
					]
				},
				{
					actConIndex: 0,
					title: '综合排序',
					content: [
						{ title: '全部医生' },
						{ title: '只看有号医生', value: 'Y' }
					]
				}
			],
			list: [],
			overFlag: false,
			page: 0,
			size: '10',
			fileOrder: '1',
			noItem: false
		}
	},
	created() {},
	onLoad() {
		Object.assign(this.$data, this.$options.data())
	},
	mounted() {
		this.wx.setNavigationBarTitle({
			title: this.btoa(this.$route.query.title)
		})
		this.resourcesType = 'Y'
		let dateArray = this.wx.getStorageSync('dateArray').dateArray
		dateArray[0].date !== this.dayjs().format('MM-DD')
			? this.getWeeks()
			: (this.dateArray = dateArray)

		this.doctorList()
	},
	methods: {
		dateTab(index) {
			//日期切换
			this.dateIndex = index
			index > 0
				? (this.beginDate = this.dateArray[index - 1].date)
				: (this.beginDate = '')
			this.noItem = false
			this.list = []
			this.overFlag = false
			this.page = 0
			this.doctorList()
		},
		getOptions(options) {
			//筛选
			this.departmentType = options[0].content[options[0].actConIndex].value
			this.resourcesType = options[1].content[options[1].actConIndex].value
			this.noItem = false
			this.list = []
			this.overFlag = false
			this.page = 0
			this.doctorList()
		},
		async doctorList() {
			this.wx.showLoading({
				title: '加载中',
				icon: 'none'
			})
			this.page++
			let params = {
				hospital_id: this.$route.query.hospitalId.toString(),
				department_id: this.$route.query.departmentId.toString(),
				page_index: this.page,
				page_size: this.size,
				fileorder: this.fileOrder
			}

			this.beginDate &&
				Object.assign(params, {
					schedule_begdate: this.beginDate,
					schedule_enddate: this.beginDate
				})

			this.departmentType &&
				Object.assign(params, {
					department_type: this.departmentType
				})

			this.resourcesType &&
				Object.assign(params, {
					resources_type: this.resourcesType
				})

			this.api.jtApi
				.doctorList(params)
				.then(data => {
					this.wx.hideLoading()
					if (data.ret_code === '0') {
						let list = this.tools.formatToArray(data.doctors.doctor)
						list.forEach(item => {
							item.sum_dqkyysl === '0'
								? (item.restNum = '已约满')
								: (item.restNum = '余' + item.sum_dqkyysl)
						})
						this.list = this.list.concat(list)
						this.overFlag = data.total_count <= this.list.length
						this.noItem = this.list.length <= 0
					}
				})
				.catch(err => {
					this.wx.hideLoading()
					this.noItem = this.list.length <= 0
				})
		},
		getWeeks() {
			let i, dateObject
			let today = this.dayjs()
			let dateArray = []
			let weekArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
			for (i = 0; i < 8; i++) {
				dateObject = {
					date: this.dayjs(today.add(i, 'day')).format('YYYY-MM-DD'),
					day: this.dayjs(today.add(i, 'day')).format('MM-DD'),
					week: weekArray[this.dayjs(today.add(i, 'day')).day()]
				}
				dateArray.push(dateObject)
			}
			this.dateArray = dateArray
			this.wx.setStorage({
				key: 'dateArray',
				data: {
					dateArray
				}
			})
		},
		scrollToLower() {
			!this.overFlag && this.doctorList()
		},
		goDetail(item) {
			this.$router.push({
				path: ''
			})
		}
	},
	components: {
		topFilter,
		noItem,
		doctorItem
	}
}
</script>

<style lang="stylus">
	.doctor-list-wrap
		.date-group
			position fixed
			top 0
			left 0
			right 0
			height 100px
			background-color white
			z-index 11
			.time-item
				width 102px
				height 100%
				center()
				border-width 1px 1px 1px 0
				border-style solid
				border-color grayBorder
				box-sizing border-box
				h6
					text-align center
					p
						line-height 36px
						color blackFontColor4C
						font-size 26px
					small
						font-size 22px
						line-height 32px
						color grayFontColor88
						padding-top 4px
				&.active
					border-color themeColor
					background-color themeColor
					p,small
						color white
			.all-date
				width 102px
				position absolute
				left 0
				top 0
				bottom 0
			.time-wrap
				position relative
				margin 0 0 0 102px
				font-size 0
				height 100%
				scrollX()
				.time-block
					display inline-block
					height 100%
		.filter-wrap
			position fixed
			top 100px
			left 0
			width 100%
			z-index 10
		.doctor-list
			position absolute
			top 184px
			bottom 0
			left 0
			width 100%
</style>
